<template>
  <el-dialog
    :title="title"
    :visible.sync="printVisible"
    width="1200px"
    append-to-body
    :before-close="cancel"
  >
    <div class="box">
      <div id="printArea">
        <div class="out">
          <h1>
            移库单：
            <input
              style="border: none"
              class="text"
              type="text"
              v-model="title1"
              placeholder="单击输入出库单名字"
            />
          </h1>
          <div class="dataPop">
            <h3>卸货期日：__________</h3>
            <h3>卸货人员签名：__________</h3>
          </div>
        </div>
        <div>
          <h2 style="margin-bottom: 20px">
            中大库位：{{ printData.warehouseLocation }}
          </h2>
          <div>装箱单号码：</div>
        </div>
        <table cellspacing="0">
          <tr align="center" class="shang">
            <td class="zuo" colspan="3">发运地址</td>
            <td colspan="3">{{ printData.deliverAddress }}</td>
            <td>联系人</td>
            <td>{{ printData.operationName }}</td>
            <td>联系电话</td>
            <td colspan="4">{{ printData.operationMobile }}</td>
            <td colspan="3">装箱单日期</td>
            <td>{{ printData.packageBillDate }}</td>
            <td width="250px">交货时间</td>
            <td class="you" width="200px">{{ printData.packageBillDate }}</td>
          </tr>
          <tr align="center">
            <td class="zuo" colspan="3">收货地址(库区)</td>
            <td colspan="3">
              <!-- {{ printData.receiptAddress }} -->
              <el-select
                @change="subjectLevelOneChanged"
                v-model="value"
                remote
                reserve-keyword
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
            <td>MP</td>
            <td>{{ text.mpName }}</td>
            <td>联系电话</td>
            <td colspan="4">{{ text.mpMobile }}</td>
            <td colspan="2">仓库收货人签名</td>
            <td colspan="2"></td>
            <td>收货日期</td>
            <td colspan="2" class="you">{{ printData.packageBillDate }}</td>
          </tr>
          <tr class="xia" align="center">
            <td class="zuo" colspan="3">承运公司</td>
            <td colspan="3">{{ printData.companyName }}</td>
            <td>调度电话</td>
            <td></td>
            <td>车牌</td>
            <td colspan="4"></td>
            <td colspan="2">荷载吨位</td>
            <td colspan="2"></td>
            <td>车箱平面尺寸(米)</td>
            <td colspan="2" class="you"></td>
          </tr>
          <tr align="center" style="background: #bfffff">
            <td style="border: 1px solid #000" colspan="20">货物信息</td>
          </tr>
          <tr align="center" class="shang">
            <td class="zuo" rowspan="2" width="60px">序号</td>
            <td rowspan="2" width="60px">箱号</td>
            <td rowspan="2" width="200px">包装种类</td>
            <td rowspan="2" width="200px">计划发货日期</td>
            <td rowspan="2" width="200px">卡特需求日期</td>
            <td rowspan="2" width="120px">JIT号码</td>
            <td rowspan="2" width="120px">订单号</td>
            <td rowspan="2" width="400px">零件号码</td>
            <td rowspan="2" width="220px">零件中文名称</td>
            <td rowspan="2" width="60px">单位</td>
            <td rowspan="2" width="150px">零件数量</td>
            <td rowspan="2" width="180px">接收中心 接收备注</td>
            <td colspan="2" width="150px">重量(公斤)</td>
            <td colspan="3" width="150px">包装尺寸(厘米)</td>
            <td rowspan="2" width="280px">仓储库位</td>
            <td rowspan="2" colspan="2" width="180px" class="you">TO号</td>
          </tr>
          <tr align="center">
            <td width="100px">毛重</td>
            <td width="100px">净重</td>
            <td width="180px">长</td>
            <td width="100px">宽</td>
            <td width="100px">高</td>
          </tr>
          <tr
            align="center"
            class="xia"
            v-for="(item, index) in data"
            :key="index"
          >
            <td class="zuo">{{ index + 1 }}</td>
            <td></td>
            <td>{{ item.packageType }}</td>
            <!--            <td>{{item.planDeliverData}}</td>-->
            <td>{{ item.planDeliverData }}</td>
            <!--            <td>{{item.requireDate}}</td>-->
            <td>{{ item.requireDate }}</td>
            <td></td>
            <td>{{ item.orderNo }}</td>
            <td>{{ item.goodsNo }}</td>
            <td>{{ item.goodsName }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.stock }}</td>
            <td>
              <input
                ref ="clearText"
                style="border: none"
                class="beizhu"
                v-model="item.beizhu"
                type="text"
                oninput="value=value.replace(/[^\d]/g,'')"
              />
            </td>
            <td>{{ item.grossWeight }}</td>
            <td>{{ item.netWeight }}</td>
            <td>{{ item.length }}</td>
            <td>{{ item.width }}</td>
            <td>{{ item.height }}</td>
            <td></td>
            <td class="you"></td>
          </tr>
          <tr>
            <td class="heji" style="text-align: right" colspan="10">
              <span :style="{ 'margin-right': '43px' }"
                >合计：回收
                <span
                  :style="{ 'padding-left': '71px', 'padding-right': '61px' }"
                >
                  {{ printData.mainCabinNum }}
                </span>
                个托盘
              </span>
            </td>
            <td class="heji hejiLeft" colspan="9">
              <span>{{ collect }}</span>
            </td>
          </tr>
        </table>
        <div class="demo">
          <div>
            <div>流水号 ____________</div>
            <div>系统录入员 ____________</div>
          </div>
        </div>
        <div class="notice">
          注意事项：
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>
        <div class="qianming">
          <div class="left">
            <span>发货仓库签名：_______________________</span>
            <span>发货日期：____________________________</span>
          </div>
          <div class="right">
            <span>运输公司签名：________________________</span>
            <span>承运日期：____________________________</span>
          </div>
        </div>
      </div>
      <div class="dayin">
        <el-button class="btn" type="primary" size="medium" v-print="print"
          >打印</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { goodsPrint } from "@/api/tms/inventory";
export default {
  props: {
    printVisible: Boolean,
    title: String,
    ids: Array,
  },
  data() {
    return {
      title1: "",
      // 汇总
      collect: "",
      id: this.ids,
      printData: {},
      data: [],
      value: "",
      list: [],
      text: {},
      options: [],
      print: {
        id: "printArea",
        popTitle: "单据打印", // 打印配置页上方标题
        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        extraCss: "",
      },
    };
  },
  watch: {
    printVisible: {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getPrint();
        }
      },
    },
  },
  methods: {
    getPrint() {
      // console.log(this.ids);
      let params = {
        idList: this.ids,
      };
      goodsPrint(params).then((res) => {
        this.printData = res.data;
        this.data = res.data.printList;
        for (let i = 0; i < this.data.length; i++) {
          this.data[i].beizhu = ''

        }
          console.log(this.data);
        let zong = 0;
        this.data.map((item) => {
          zong += item.stock;
          this.collect = zong;
        });
        this.list = res.data.warehouseList;
        for (let i = 0; i < res.data.warehouseList.length; i++) {
          let array = {};
          array.value = i;
          array.label = res.data.warehouseList[i].address;
          this.options.push(array);
        }
      });
    },
    subjectLevelOneChanged(value) {
      this.text = this.list[value];
    },
    // 取消按钮
    cancel() {
      this.$emit("refresh");
      this.options = [];
      this.collect = "";
      this.title1 = "";
      // console.log(this.$refs.clearText);

    },
    // open(){
    //   console.log(this.$refs.clearText);
    // }
  },
};
</script>

<style media="print" lang="scss" scoped>
@page {
  size: auto;
}
@media print {
  html {
    zoom: 50%;
    margin: 0 auto;
  }
}
* {
  padding: 0;
  margin: 0;
}
.qianming {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
.heji {
  border-bottom: none;
  border-left: none;
  // border-right: none;
  // text-align: center;
}
.heji span {
  text-align: right;
}
.hejiLeft {
  text-align: left;
  border-right: none;
  padding-left: 20px;
}
.left,
.right {
  height: 100%;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
table {
  width: 1050px;
  margin: 5px;
  border: 2px solid #000;
  font-size: 12px;
}
table tr {
  width: 100%;
  margin-bottom: 3px;
  /* background-color: green; */
}
table tr td {
  border: 0.5px dashed #000;
}
::v-deep .el-input__inner {
  width: 100%;
  border: none;
  box-shadow: none;
  // background-color: pink;
  // direction: ltl;
  padding: 0;
}
.demo {
  width: 100%;
  // background-color: red;
  // text-align: right;
  display: flex;
  justify-content: space-between;
}
.demo > div:first-child {
  // margin: 10px;
  margin-left: 880px;
}
.demo > div:last-child {
  text-align: right;
}
.box {
  width: 1050px;
  padding: 0px;
  margin: 0 auto;
  font-size: 14px;
}
.shang td {
  border-top: none;
}
.xia td {
  border-bottom: none;
}
.you {
  border-right: none;
}
.notice ol {
  padding: 10px 10px 10px 40px;
  /* background-color: green; */
}
.btn {
  width: 100px;
  height: 50px;
}
.zuo {
  border-left: none;
}
.dayin {
  text-align: center;
  /* background-color: green; */
}
.text:focus {
  outline: 1px solid #000;
}
.text {
  width: 350px;
  // background-color: pink;
  height: 30px;
  font-size: 30px;
}
.beizhu {
  width: 100%;
  height: 100%;
  // font-size: 14px;
  text-align: center;
}
.beizhu:focus {
  outline: none;
}
.out {
  height: 60px;
  // background-color: pink;
  display: flex;
  justify-content: space-around;
}
.out > h1 {
  margin-left: 309px;
}
.dataPop {
  text-align: right;
  margin-right: -15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
